
BFC是块级格式上下文（Block Formatting Context，BFC），是CSS布局的一个概念，在BFC布局里面的元素不受外面元素影响。

<!-- 创建BFC条件 -->

文档的根元素-html
浮动元素里float值不为none的元素
设置绝对定位： position（absolute、fixed）
overflow 的值不为 visible或clip的元素（overfilow值为：hidden、auto、`scroll）
display值为：inline-block、table-cell、table-caption、flex等

<!-- BFC作用： -->

解决margin重叠问题：由于BFC是一个独立的区域，内部元素和外部元素互不影响，将两个元素变为BFC，就解决了margin重叠问题
解决高度塌陷问题：在子元素设置浮动后，父元素会发生高度的塌陷，也就是父元素的高度为0解决这个问题，只需要将父元素变成一个BFC。
创建自适应两栏布局：可以用来创建自适应两栏布局，左边宽高固定，右边宽度自适应。


<!-- 解决margin重叠问题列子 -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .contrainer{
    background: green;
    width: 500px;
    height: 500px;
  }
  .bfc {
    overflow: hidden;
  }
  .one {
    width: 500px;
    height: 20px;
    background-color: orange;
    margin-bottom: 10px;
  }
  .two {
    width: 500px;
    height: 20px;
    background-color: orange;
    margin-top: 10px;
  }
</style>
<body>
  <div class="contrainer">
    <div class="bfc">
      <div class="one"></div>
    </div>
    <div class="two"></div>
  </div>
</body>
</html> -->

<!-- 高度塌陷问题列子 -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .outer{
    background: green;
    width: 500px;
    border: 1px solid red;
    /* 给父元素触发bfc */
    overflow: auto;
  }
  .float {
    width: 100px;
    height: 100px;
    background: orange;
    float: left;
  }
</style>
<body>
  <div class="outer">
    <div class="float"></div>
  </div>
</body>
</html> -->

<!--创建自适应两栏布局列子-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .container {
    width: 600px;
    height: 200px;
    background-color: rgb(208,248,248);
  }

  .left {
    width: 200px;
    height: 100px;
    background-color: #caa3e8;
    float: left;
  }

  .right {
    height: 200px;
    background-color: #fff1b6;
    /* 给right盒子创建bfc 正常文档流中建立的bfc不会与该元素本身所在的区域内任何浮动元素的外边距重叠 */
    overflow: auto;
  }
</style>
<body>
  <div class="container">
    <div class="left"></div>
    <div class="right">12333312311312232222</div>
  </div>
</body>
</html>